<template>
  <el-form style="padding: 10px 30px;">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item  label="店铺类别: ">
          {{ data.shopTypeName }}
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item  label="首次开始服务日期: ">
          {{ data.firstStartDate }}
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item  label="开始日期: ">
          {{ data.startDate }}
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item  label="结束日期: ">
          {{ data.endDate }}
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item  label="剔除退款: ">
          {{ data.excludingRefunds ? '是' : '否' }}
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item  label="客服类型: ">
          {{ data.customTypeName  }}
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item  label="班次: ">
          {{ data.serviceShiftName  }}
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item  label="底薪(元): ">
          {{ data.baseSalary  }}
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item  label="提成: ">
          {{ data.commission }}
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item  label="咨询人数: ">
          {{ data.consultPeopleNum  }}
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item  label="转化率: ">
          {{ data.conversionRate  }}
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item  label="响应时间: ">
          {{ data.responseSecond  }}
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item  label="所在地区: ">
          {{ data.area  }}
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item  label="联系人: ">
          {{ data.contacts  }}
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item  label="联系人手机: ">
          {{ data.phone  }}
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item  label="客户配合度: ">
          {{ data.fitRatioName  }}
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item  label="微信: ">
          {{ data.wechat  }}
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item  label="QQ: ">
          {{ data.qq  }}
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item  label="钉钉: ">
          {{ data.ding  }}
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { getShopDetail } from '../api'
const props = defineProps<{ data: any }>()

const loading = ref(true)
const data = reactive<any>({})

getShopDetail({ shopId: props.data.shopId })
  .then(res => {
    Object.assign(data, res || {})
  })
  .finally(() => {
    loading.value = false
  })
</script>